<script setup lang="ts">
import { useRouter } from 'vue-router';

import type { TriggerMenuItemProps } from './types';

const router = useRouter();
const props = defineProps<TriggerMenuItemProps>();

const onItemClick = () => {
  if (props.to == null) {
    return;
  }

  router.push({
    path: props.to
  });
};

defineOptions({ name: 'MTriggerMenuItem' });
</script>

<template>
  <div
    class="mx-0.5 flex w-5 flex-col items-center justify-center"
    @click="onItemClick"
  >
    <MSvgIcon :name="props.icon" class="h-2 w-2" :fillClass="props.iconClass" />
    <p :class="textClass" class="mt-0.5 text-sm">
      <slot />
    </p>
  </div>
</template>
